:global {

    @prefix: ~'wpt';
    @radio-prefix-cls: ~'@{prefix}-radio';
    @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
    @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
    @radio-duration: 0.3s;
    @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);

    .@{radio-group-prefix-cls} {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
        line-height: unset;
    }

    .@{radio-prefix-cls}-wrapper {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;

        position: relative;
        display: inline-block;
        margin-right: 8px;
        white-space: nowrap;
        cursor: pointer;


    }

    .@{radio-prefix-cls} {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;

        position: relative;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        vertical-align: sub;
        outline: none;
        cursor: pointer;


        &-input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
        }

        @radio-size: 18px;

        &-inner {
            &::after {
                @radio-dot-size: @radio-size - 6px;


                position: absolute;
                //top: (@radio-size - @radio-dot-size) / 2 ;
                //left: (@radio-size - @radio-dot-size) / 2 ;
                transform-origin: top left;
                top: 50%;
                left: 50%;
                display: table;
                width: @radio-dot-size;
                height: @radio-dot-size;
                background-color: #AB3B3A;
                border-top: 0;
                border-left: 0;
                border-radius: 50%;
                transform: scale(0) translate(-50%, -50%);
                opacity: 0;
                transition: all 0.3s @ease-in-out-circ;
                content: ' ';
            }

            position: relative;
            top: 0;
            left: 0;
            display: block;
            width: @radio-size;
            height: @radio-size;
            background-color: #FFF;
            border-color: #CCCCCC;
            border-style: solid;
            border-width: 1px;
            border-radius: 50%;
            transition: all 0.3s;
        }

    }

    .@{radio-prefix-cls}-checked {
        .@{radio-inner-prefix-cls} {
            &::after {
                transform: scale(1) translate(-50%, -50%);
                opacity: 1;
                transition: all @radio-duration @ease-in-out-circ;
            }
        }
    }
}
